<template>
  <div class="login">
    <!-- Container -->
    <div id="container">
      <!-- Header -->
      <div id="header">
        <div id="branding">
          <h1 id="site-name"><a href="/semfpro/">Django 管理</a></h1>
        </div>
      </div>
      <!-- END Header -->
      <!-- Content -->
      <div id="content" class="colM">
        <p v-if="error" class="errornote">
          请输入一个正确的 用户名 和密码. 注意他们都是区分大小写的.
        </p>
        <div id="content-main">
          <form id="login-form">
            <div class="form-row">
              <label class="required" for="id_username">用户名:</label> <input
                id="id_username"
                v-model="loginForm.username"
                type="text"
                name="username"
                autofocus
                autocapitalize="none"
                autocomplete="username"
                maxlength="150"
                required
              >
            </div>
            <div class="form-row">
              <label class="required" for="id_password">密码:</label> <input
                id="id_password"
                v-model="loginForm.password"
                type="password"
                name="password"
                autocomplete="current-password"
                required
              >
              <input type="hidden" name="next" value="/semfpro/">
            </div>
            <div class="submit-row">
              <label>&nbsp;</label><input id="login" type="submit" value="登录" @click.prevent="login">
            </div>
          </form>
        </div>
        <br class="clear">
      </div>
      <!-- END Content -->
      <div id="footer" />
    </div>
  </div>
</template>

<script>
import '../../styles/admin/base.css'
import '../../styles/admin/login.css'
import '../../styles/admin/responsive.css'
export default {
  name: 'MockLogin',
  data() {
    return {
      error: false,
      loginForm: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    login() {
      this.$http.post('/base/admin/login/', this.loginForm).then(res => {
        this.error = true
      }).catch(() => {
        this.error = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
